<template>
  <div>
    用户名: <input v-model="username" type="text"><br>
    姓名: <input v-model="fullname" type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '爱新觉罗张三'
    }
  },
  computed: {
    // 计算属性的简单写法, 只能获取数据, 不能修改数据
    // fullname() {
    //   return '爱新觉罗张三'
    // }
    // 计算属性的完整写法
    // 语法:
    // 计算属性名: {
    //   get() {},
    //   set() {}
    // }
    fullname: {
      // get 函数就等同于简单写法的函数
      // 计算属性必须要有 get, 而且需要返回结果
      get() {
        return this.username
      },
      // 如果要修改计算属性, 就需要使用 set 函数了
      // set 方法第一个参数就是用户赋给计算属性的值
      set(val) {
        // console.log('我是 set 我被调用了', val)
        this.username = val
      }
    }
    // 计算属性完整写法的小结
    // 1. 如果要访问计算属性, 会自动执行 get
    // 2. 如果要修改计算属性, 会自动执行 set
  }
}
</script>

<style>

</style>